<template>
  <h3 class="title">AxiosDemo</h3>
  <button @click="axiosGet">GET</button>
  <button @click="axiosPostJson">POST-JSON</button>
  <button @click="axiosPostForm">POST-FORM</button>
  <button @click="instanceGet">instance-get</button>
  <button @click="interceptorGet">拦截器</button>
</template>

<script>
import axios from "axios";

export default {
  methods: {
    axiosGet() {
      axios
        .get("http://httpbin.org/get?username=admin&pwd=123456")
        .then(function (res) {
          console.log("res=", res);
        })
        .catch(function (err) {
          console.log("err=", err);
        });
    },

    instanceGet() {
      const instance = axios.create({
        baseURL: "http://localhost:9000",
        timeout: 3000,
        headers: { authorization: "Bearer token" },
      });

      instance
        .get("/api/movie/cities")
        .then(function (res) {
          console.log("res.data=", res.data);
        })
        .catch(function (err) {
          console.log("err=", err);
        });
    },

    axiosPostJson() {
      axios
        .post(
          "http://httpbin.org/post",

          // 默认数据类型为JSON
          {
            username: "admin",
            password: "123456",
          }
        )
        .then(function (res) {
          console.log("res.data=", res.data);
        })
        .catch(function (err) {
          console.log("err=", err);
        });
    },

    axiosPostForm() {
      /* 构造表单数据 */
      const params = new URLSearchParams();
      params.append("username", "admin");
      params.append("password", "654321");

      axios
        .post(
          "http://httpbin.org/post",

          // 携带表单数据
          params
        )
        .then(function (res) {
          console.log("res.data=", res.data);
        })
        .catch(function (err) {
          console.log("err=", err);
        });
    },

    interceptorGet() {
      const instance = axios.create({
        baseURL: "http://localhost:9000",
        timeout: 3000,
        headers: { "X-Custom-Header": "foobar" },
      });

      /* 在axios实例的身上配置拦截器 */
      // 添加请求拦截器
      instance.interceptors.request.use(
        function (config) {
          // 在发送请求之前做些什么：为所有请求配置请求头authorization 令其携带身份认证token
          config.headers["authorization"] = "Bearer mytoken";
          return config;
        },
        function (error) {
          // 对请求错误做些什么
          return Promise.reject(error);
        }
      );

      // 添加响应拦截器
      instance.interceptors.response.use(
        function (response) {
          // 对响应数据做点什么：从响应中剥离出【服务器端返回的数据】 过滤掉axios自行封装的信息
          return response.data;
        },
        function (error) {
          // 对响应错误做点什么
          return Promise.reject(error);
        }
      );

      /* 使用instance实例发起请求 */
      instance
        .get("/api/movie/cinemas")
        .then((res) => console.log("res=", res))
        .catch((err) => console.error("err=", err));
    },
  },
};
</script>

<style lang="scss" scoped></style>
